<template>
  <view class="locate" @click.stop="handleClick">
    <view v-if="location==''" style="width: 100%;" @click="requireLocate">
      <view style="display: flex ">
        <uni-icons type="location" size="22" class="icon"></uni-icons>
        <text class="tx">获取位置信息</text>
      </view>
      <view
        style="margin-top: 30px; width: 100%;display: flex;flex-direction: column;align-items: center;margin-bottom: 200px;">
        <image src="../../static/位置.png" class="img" mode="heightFix"></image>
        <view style="display: flex;" class="down">
          请点击上方单元格获取您的位置信息
        </view>
      </view>
    </view>
    <view v-else style="width: 100%;">
      <view class="first" @click="requireLocate">
        <view class="left">
          <uni-icons type="location" size="20" class="icon"></uni-icons>
          <text class="ftx">当前位置</text>
        </view>
        <view class="right">
          <text class="ftx">{{location}}</text>
        </view>
      </view>
      <text class="down">地点名称：{{name}}</text>
      <view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)">
        <!-- 为 my-goods 组件动态绑定 goods 属性的值 -->
        <my-goods :goods="item" :state="5"></my-goods>
      </view>

      <view class="loading-text" :style="{ paddingBottom: safeAreaInsets ? safeAreaInsets.bottom + 'px' : '0' }">
        {{isConfirm ? '没有更多数据~' : '正在加载...' }}
      </view>
    </view>


  </view>

</template>

<script>
  export default {
    name: "my-location-list",
    data() {
      return {
        location: '',
        name: '',

        queryObj: {
          longitude: 0,
          latitude: 0,
          page: 1,
          pageSize: 10
        },
        // 商品列表的数据
        goodsList: [],
        // 总数量，用来实现分页
        total: 0,
        isLoading: false,
        isConfirm: false,
        safeAreaInsets: 0,
      };
    },
    onLoad() {
      this.safeAreaInsets = uni.getSystemInfoSync()
    },
    beforeDestroy() {
      // 组件销毁前，移除事件监听
      uni.$off('onReachBottom');
    },
    beforeMount() {
      uni.$on('onReachBottom', () => {
        if (!this.confirm) return
        // 判断是否还有下一页数据
        if (this.queryObj.page * this.queryObj.pageSize >= this.total) {
          this.isConfirm = true
          return uni.$showMsg('没有更多数据~')
        }

        if (this.isLoading) return
        this.isConfirm = false

        // 让页码值自增 +1
        this.queryObj.page += 1
        // 重新获取列表数据
        this.getGoodsList()
      })

    },
    methods: {
      handleClick(event) {
        // 阻止事件继续传播到父组件
        event.stopPropagation();
        // 处理其他逻辑
      },
      async getGoodsList() {
        this.isConfirm = false
        //互斥访问
        this.isLoading = true
        const {
          data: res
        } = await uni.$http.get('/goods/localSearch', this.queryObj)
        console.log(res)
        this.isLoading = false
        this.isConfirm = true
        if (res.code !== 200) return uni.$showMsg()
        // if(res.data.records==[])
        this.goodsList = [...this.goodsList, ...res.data.records]
        this.total = res.data.total

      },
      // 点击跳转到商品详情页面
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/goods_detail/goods_detail?goods_id=' + item.goodsId
        })
      },
      requireLocate() {
        uni.chooseLocation({
          success: (res) => {
            console.log(res)
            this.location = res.address;
            this.name = res.name;
            this.queryObj.longitude = res.longitude;
            this.queryObj.latitude = res.latitude;
            this.goodsList = [],
            this.getGoodsList()

          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
  }

  .locate {
    display: flex;
    height: 100%;
    margin: 15rpx;
    padding: 15rpx;

    .img {
      display: flex;

      height: 150px;
      text-align: center;
      align-items: center;
    }

    .icon {
      text-align: center;
    }

    .tx {
      font-size: 12px;
      display: flex;
      align-items: center;
    }

    .lc {
      font-size: 13px;
      text-align: right;
      color: #ddd;
    }

    .first {
      display: flex;
      align-items: center;
      width: 100%;

      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;
        font-size: 12px;
      }

      .right {
        display: flex;
        align-items: center;

        .ftx {
          font-size: 12px;
          color: #b3b3b3;
        }
      }

    }

    .down {
      font-size: 12px;
      color: #b3b3b3;
      padding-left: 18px;
      align-items: center;
    }

  }
</style>